.recommendedReading {
  width: 300px;
  height: 300px;
  border: 1px solid var(--border-color);
  background: var(--bg-second);
  margin: 0;
  padding: 0;
}

.recommendedReading-h4 {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-second);
  text-indent: 1em;
  color: var(--main-text-color);
  font-size: 16px;
}

.recommendedReading-li-h4 {
  color: var(--main-text-color);
}

.recommendedReading-ul {
  width: 100%;
  height: 250px;
  margin-left: -20px;
  color: var(--main-text-color);
}

.recommendedReading-li {
  width: 100%;

  h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.recommendedReading-li h4{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px;
}

.recommendedReading-li :hover {
  color: hotpink;
}
